<template>
	<view class="dk-detail-container">
		<view class="dk-detail-top">
			<view class="dk-detail-c-date" @tap.stop="selectDateTime()">
				<u-icon style="margin-top: -5rpx;" name="calendar" color="#4378BE" size="40"></u-icon>
				<view class="dk-detail-c-date-selected">{{ currentDateStr }}</view>
			</view>
		</view>
		<view class="dk-detail-count">
			共打卡{{dkNumber}}次，打卡门店{{mdNumber}}家
		</view>
		<view class="dk-detail-list" v-if="dkRecordList.length > 0">
			<view class="dk-detail-item" v-for="(item, index) in dkRecordList" :key="index">
				<view class="dk-record-title">
					<image src="../../static/loca@3x.png"></image>
					<view class="dk-record-title-text">{{item.storeName || ''}}</view>
				</view>
				<view class="dk-record-info">门店类型：{{item.storeType || ''}}</view>
				<view class="dk-record-info2">打卡时间：{{item.dataDate || ''}}</view>
			</view>
		</view>
		<u-calendar v-model="showCalendar" :mode="calendarMode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import {
		getMapJmSalesDkInfo
	} from '../../common/service.js'
	import utils from '../../common/utils.js'

	export default {
		data() {
			return {
				showCalendar: false,
				calendarMode: 'date', // date只能选择单个日期;range可以选择日期范围
				currentDate: '', // 年月如： 2020-10
				currentDateStr: '', // 年月如：2020年10月
				dkNumber: 0, // 该年月共打卡dkNumber次
				mdNumber: 0, // 该年月共打卡mdNumber家门店
				dkRecordList: [] // 该年月打卡记录列表
			};
		},
		onLoad: function() {
			this.currentDate = utils.dateFormat('YYYY-mm', new Date());
			this.currentDateStr = utils.dateFormat('YYYY年mm月', new Date());
		},
		onShow: function() {
			this.getList()
		},
		methods: {
			selectDateTime: function() {
				this.showCalendar = true;
			},
			change: function(res) {
				console.log('所选：');
				console.log(res);
				this.currentDate = res.year + '-' + res.month;
				this.currentDateStr = res.year + '年' + res.month + '月';
				this.getList();
			},
			getList: function() {
				const that = this;
				console.log('获取打卡记录:');
				console.log(that.CONFIG);
				console.log(that.currentDate || utils.dateFormat('YYYY-mm', new Date()));
				if (!that.CONFIG.user.id) {
					return;
				}
				const params = {
					code: that.CONFIG.user.id,
					date: that.currentDate || utils.dateFormat('YYYY-mm', new Date())
				};
				getMapJmSalesDkInfo(params, function(resuser) {
					console.log('考勤打卡记录列表-success:');
					console.log(resuser);
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('rs:');
						console.log(rs);
						that.dkNumber = rs.dkNumber || 0;
						that.mdNumber = rs.mdNumber || 0;
						that.dkRecordList = rs.dkRecord || [];
					}
				}, function(e) {
					console.log('获取考勤打卡记录-err:');
					console.log(e);
				});
			}
		}
	};
</script>

<style>
	page,
	.dk-detail-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: #f1f1f1;
	}

	.dk-detail-top {
		width: 100%;
		height: 110rpx;
		background-color: #4378BE;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.dk-detail-c-date {
		width: 50%;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dk-detail-c-date-selected {
		color: #4378BE;
		margin-left: 10rpx;
	}

	.dk-detail-count {
		widows: 100%;
		height: 73rpx;
		line-height: 73rpx;
		text-align: center;
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.dk-detail-list {
		position: fixed;
		left: 0;
		top: 193rpx;
		right: 0;
		bottom: 0;
		overflow: auto;
	}

	.dk-detail-item {
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.dk-detail-item .dk-record-title {
		width: 656rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 34rpx;
	}

	.dk-detail-item .dk-record-title image {
		width: 38rpx;
		height: 38rpx;
	}

	.dk-detail-item .dk-record-title .dk-record-title-text {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 12rpx;
		word-wrap:break-word;
		word-break:break-all;
		overflow: hidden;
	}

	.dk-detail-item .dk-record-info {
		width: 100%;
		height: 48rpx;
		line-height: 48rpx;
		text-align: left;
		text-indent: 34rpx;
		font-family: PingFang-SC-Regular;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.dk-detail-item .dk-record-info2 {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: left;
		text-indent: 34rpx;
		font-family: PingFang-SC-Regular;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #999999;
	}
</style>
